<!--筛选弹窗组件-->
<template>
  <van-popup v-model="showScreen" position="right" class="screen-popup" :close-on-click-overlay="false">
    <view class="screen-popup-content-main">
      <view class="screen-type-item" v-for="(typeItem, typeIndex) in typeList" :key="typeIndex">
        <plateTitle :title="typeItem.title" :isRequired="false" class="plate-title"/>
        <view class="screen-option-container">
          <view class="screen-option-item"
                :class="{active: selected[typeItem.type] === item.VALUE}"
                v-for="(item,index) in typeItem.optionList"
				:key="index"
                @click="select(typeItem, item)">{{ item.TITLE }}
          </view>
        </view>
      </view>

      <slot></slot>

    </view>


    <view class="btn-container">
      <van-button block type="info" color="#417ADC" plain @click="reset">重置</van-button>
      <van-button block type="info" color="#417ADC" @click="screenConfirm">确认</van-button>
    </view>
  </van-popup>
</template>

<script>
import plateTitle from './plateTitle.vue';
export default {
  name: "screen",
  components: {plateTitle},
  props: {
    typeList: {
      type: Array,
      required: true,
    },
    showScreen: {
      type: Boolean,
      required: true,
    }
  },
  watch: {
    typeList:{
      deep: true,
      immediate: true,
      handler: function (newVal) {
        this.selected = newVal.reduce((prev, item) => {
          // 默认选择全部
          prev[item.type] = item.optionList[0].VALUE;
          return prev;
        }, {})
      }
    }
  },
  data() {
    return {
      selected: {}, // 已选
    }
  },
  methods: {

    select (typeItem, seletedItem) {
      // 未含有的---添加
      if (!this.selected[typeItem.type]) {
        this.selected[typeItem.type] = seletedItem.VALUE;
      } else {
        // 已经含有的---两种情况  相同的---去除    不同的----替换
        if (this.selected[typeItem.type] === seletedItem.VALUE) {
          this.selected[typeItem.type] = '';
        } else {
          this.selected[typeItem.type] = seletedItem.VALUE
        }
      }
    },
    // 重置选项
    reset() {
      this.selected = this.typeList.reduce((prev, item) => {
        // 默认选择全部
        prev[item.type] = item.optionList[0].VALUE;
        return prev;
      }, {})
      // this.closePopup()
      // this.$emit('reset', false);
    },

    closePopup() {
      this.$emit('closePopup', false);
    },

    screenConfirm() {
      this.closePopup()
      this.$emit('confirm', this.selected)
    }
  }
};
</script>

<style scoped lang="scss">
.screen-popup {
  width: px2vw(820);
  height: calc(100vh - #{px2vh(212)});
  padding: px2vh(162) px2vw(40) px2vh(50);

  .screen-popup-content-main {
    height: calc(100vh - #{px2vh(342)});
    padding-bottom: px2vh(30);

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(350);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item:nth-child(2) {
          margin-left: px2vw(60);
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }
  }

  .btn-container {
    display: flex;
    justify-content: space-between;

    .van-button {
      height: px2vh(100);
      margin-right: px2vw(30);
      border-radius: $border-radius-base;
    }

  }
}
</style>
